<template>
	<view class="login">
		<view class="login_box">
			<image src="../../static/img/logo.png" class="logo_img" mode=""></image>
		</view>
		<view class="form_box">
			<u-field :error-message="errorPhoneMessage" label-width='0' v-model="form.telPhone" label=""
				placeholder="请填写手机号">
			</u-field>
			<u-field :password='true' v-if="!isCode" :error-message="errorPasswordMessage" label-width='0' v-model="form.passWord"
				label="" placeholder="请填写密码">
			</u-field>
			<view class="" v-else>
				<u-field v-model="form.code" label-width='0' placeholder="请填写验证码">
					<u-button size="mini" slot="right" type="primary" @click="getCode">{{codeText}}</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</view>
			<view class="login_type" v-if="!isCode">
				<view class="text_code" @click="isCode=!isCode">
					验证码登录
				</view>
				<view class="text_paw" @click="showForget=true">
					忘记密码
				</view>
			</view>
			<view class="text_paw" v-else @click="isCode=!isCode">
				密码登录
			</view>
		</view>
		<view class="btn_login">
			<u-button type='primary' shape="circle" @click="submit">登陆</u-button>
			<u-checkbox style="margin-top: 35rpx;" v-model="checked" :disabled="false">
				阅读并同意
				<text class="text_color">用户服务协议</text>
				和
				<text class="text_color">隐私政策</text>
			</u-checkbox>
		</view>
		<u-action-sheet @click="clickForget" :tips="tips" :list="list" v-model="showForget"></u-action-sheet>
	</view>
</template>

<script>
	import cacheFunc from '@/utils/cache.js'
	import getLocationInfo from '@/mixin/getLocationInfo.js'
	export default {
		mixins: [getLocationInfo],
		data() {
			return {
				tips: {
					text: '选择找回密码方式',
					fontSize: '34',
					color: '#101010'
				},
				list: [{
					text: '验证码找回',
				}],
				showForget: false,
				errorPhoneMessage: '',
				errorPasswordMessage: '',
				checked: true,
				isCode: true,

				codeText: '',
				form: {
					telPhone: '',
					passWord: '',
					code: '',
				}
			};
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {},
		methods: {
			clickForget() {
				uni.navigateTo({
					url: '/pages/editPhone/editPhone?isLogin=1'
				})
			},
			async submit() {
				if (!this.checked) {
					this.$u.toast('阅读并同意用户服务协议和隐私政策');
					return
				}
				if (!this.isCode && !this.form.telPhone) {
					this.$u.toast('请先输入手机号码!');
					return
				}
				if (!this.isCode && !this.form.passWord) {
					this.$u.toast('请先输入密码!');
					return
				}
				if (this.isCode && !this.form.code) {
					this.$u.toast('请先输入验证码!');
					return

				}
				if (!this.isCode) {
					const res = await this.$u.api.passwordLogin(this.form)
					this.onReady()
					console.log(res, 'res')
					if (res) {
						cacheFunc.setCache('userInfo', res)
						cacheFunc.setCache('token', res.token)
						uni.showLoading({
							title: '登录成功,跳转中'
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}

				} else {
					try {
						const res = await this.$u.api.telPhoneLogin(this.form)
						console.log(res, '验证码登录res')
						// if (res == 400) {
						// 	uni.navigateTo({
						// 		url: '/pages/invitationCode/invitationCode?phone=' + this.form.telPhone
						// 	})
						// } else {
						this.onReady()
						cacheFunc.setCache('userInfo', res.data)
						cacheFunc.setCache('token', res.data.token)
						uni.showLoading({
							title: '登录成功,跳转中'
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
						// }
					} catch (e) {
						console.log(e, '验证码登录')
						//TODO handle the exception
					}

				}

			},
			codeChange(text) {
				this.codeText = text;
			},
			async getCode() {

				if (!this.form.telPhone) {
					this.$u.toast('请先输入手机号码!');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await this.$u.api.sendSMS(this.form)
					console.log(res, '验证码')
					uni.hideLoading();
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 0 30rpx;
	}

	.btn_login {
		margin-top: 50rpx;

		text-align: center;

		.text_color {
			color: $u-type-primary;
		}
	}

	.text_paw {
		font-size: 26rpx;
		color: #000;
		margin-top: 20rpx;
		text-align: right;
	}

	.login_type {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.text_paw {
			color: $u-type-primary;
		}
	}

	.text_code {
		font-size: 26rpx;
		color: $u-type-primary;
		margin-top: 20rpx;
	}

	.form_box {
		margin-top: 50rpx;
	}

	.login_box {
		margin-top: 260rpx;
		text-align: center;

		.logo_img {
			width: 170rpx;
			height: 170rpx;
			// text-align: center;
		}
	}
</style>
